<template>
  <view class="selector-item">
    <view class="selector-item_checkbox">
      <ve-icon v-if="selected" name="icon-checkbox-select" width="28"></ve-icon>
      <ve-icon v-else name="icon-checkbox" width="28"></ve-icon>
    </view>
    <view class="selector-item_label">{{ record.label }}</view>
    <view class="selector-item_desc" v-if="record.desc">{{ record.desc }}</view>
  </view>
</template>

<script setup>
  defineProps({
    selected: Boolean,
    record: Object,
  })
</script>

<style lang="less" scoped>
  .selector-item {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    min-height: 108rpx;
    padding: 32rpx;
    margin: 24rpx;

    &_checkbox {
      position: absolute;
      top: 50%;
      margin-top: -20rpx;
      right: 32rpx;
    }

    &_label {
      margin-right: 64rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #191c27;
      line-height: 44rpx;
    }

    &_desc {
      margin-top: 12rpx;
      margin-right: 24px;
      font-size: 30rpx;
      font-weight: 400;
      color: #8491a8;
      line-height: 40rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
